---
title: Points
---

<Example path="geometry/points" />

### Using points

<Tip type="tip">
  Points work in Threlte the same way they do in Three.js. Check out the docs about
  [Points](https://threejs.org/docs/#api/en/objects/Points) and
  [PointsMaterial](https://threejs.org/docs/?q=Point#api/en/materials/PointsMaterial) to learn more.
</Tip>

#### Ensuring points work correctly with `BufferGeometry`

For your points to function correctly, it's essential that they have an associated
`BufferGeometry` with a specified attribute for point positions.
Here's a straightforward method using the default Threlte approach:

```svelte
<T.Points>
  <T.BufferGeometry>
    <T.BufferAttribute
      args={[positions, 3]}
      attach={({ parent, ref }) => {
        parent.setAttribute('position', ref)
        return () => {
          // cleanup function called when ref changes or the component unmounts
          // https://threlte.xyz/docs/reference/core/t#attach
        }
      }}
    />
  </T.BufferGeometry>
  <T.PointsMaterial size={0.25} />
</T.Points>
```

In the case of `<T.BufferAttribute>`, it is not enough to make it a child of `<T.BufferGeometry>`. To actually link it,
you must invoke the attach method. If you skip this step, the attribute
won't be associated with the geometry. [Learn more about how attach works.](/docs/reference/core/t#attach)

Alternatively, you can also define and manage BufferGeometry within `<script>` tags or
in an external file. Once done, the `<T>` component allows for direct attachment
to `<T.Points>`, like so:

```svelte
<T.Points>
  <T is={pointsBufferGeometry} />
  <T.PointsMaterial size={0.25} />
</T.Points>
```

Working code for this approach can be found in `SceneAlternative.svelte` file of this example.
